<template>
  <div class="permission-container">
    <el-card class="mycard">
      <div class="btnbox">
        <el-button
          type="primary"
          icon="el-icon-edit"
          size="mini"
          @click="oppenAdd(1, 0)"
          >添加菜单</el-button
        >
      </div>
      <el-table class="mytable" :data="perList" row-key='id'>
        <el-table-column label="菜单名称" prop="name"></el-table-column>
        <el-table-column label="权限标识" prop="code"></el-table-column>
        <el-table-column label="描述" prop="description"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button type="text" @click="oppenAdd(2, row.id)"
              >添加权限点</el-button
            >
            <el-button type="text">查看api权限</el-button>
            <el-button type="text" @click="showPanel(row.id)">查看</el-button>
            <el-button type="text" @click="delPer(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <panel :showPer.sync="showPer" ref="mypanel" @updata="getAllPer"></panel>
    </el-card>
  </div>
</template>

<script>
import { getAllPerApi, delPerApi } from '@/api/permission'
export default {
  name: 'permission',
  data () {
    return {
      perList: [],
      showPer: false
    }
  },
  created () {
    this.getAllPer()
  },
  components: {
    panel: () => import('./components/panel.vue')
  },
  methods: {
    //获取全部权限列表
    async getAllPer () {
      const res = await getAllPerApi()
      console.log(res)
      this.perList = this.turnData(res.data, '0')
    },
    //转换树形结构
    turnData (arr, pid) {
      const res = []
      arr.forEach(item => {
        if (item.pid === pid) {
          const son = this.turnData(arr, item.id)
          if (son.length > 0) {
            item.children = son
          }
          res.push(item)
        }
      })
      return res
    },
    //删除权限点
    async delPer (id) {
      try {
        await this.$confirm('您确认要删除该文件吗', '提示')
        await delPerApi(id)
        this.$message.success('删除成功')
        this.getAllPer()
      } catch {}
    },
    //编辑权限点
    showPanel (id) {
      this.showPer = true
      this.$refs.mypanel.getPerDetail(id)
    },
    //打开新增面板
    oppenAdd (type, pid) {
      this.showPer = true
      this.$refs.mypanel.getData(type, pid)
    }
  }
}
</script>

<style lang="scss">
.permission-container {
  padding: 20px;
  .mycard {
    position: relative;
    height: 800px;

    .btnbox {
      position: absolute;
      right: 20px;
      top: 20px;
    }
    .mytable {
      margin-top: 50px;
    }
  }
}
</style>
